<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div :data-id="item.id"  class="wb-text" @click="onClickText">
        <p v-if="isPLabel" ref="refDom" v-html="textValue" :style="styles" class="wid-hei-inherit overflow-hidden"></p>
        <van-field
          v-else
          :center="true"
          :border="false"
          type="textarea"
          ref="refDom"
          :maxlength="commonAttr.limitTextNum ? commonAttr.limitTextNum : 1000"
          :placeholder="commonAttr.placeholder"
          :readonly="isH5Edit ? false : !commonAttr.isEdit"
          v-model="textValue"
          :style="styles"
          @update:model-value="updateFormValueMap"></van-field>
        <span class="need-cls font-size-24" v-show="item.commonAttr.isEdit && item.commonAttr.need && item.commonAttr.isShowNeed">*</span>
      </div>
    </template>
  </inject-template>
</template>

<script setup lang="ts">
import { getCompStyle, getDataKeyValue, getAttrByCustom } from '@/components/utils/'
import { useSiteStore } from '@/store/site'
import { useControlsStore } from '@/store/controls'
import { useInteractionStore } from '@/store/interaction'
import { replaceStr, getCompIdByParam, EventBus, testGuid, addClass, getPxOVwByValue } from '@/utils/'
import { COMPONENT_TYPES, CONTROL_TYPES } from '@/const/'

const props = defineProps<{ 
  item: IComponent,
  pageId: number,
  popId: number,
}>()
const item = props.item
const commonAttr = item.commonAttr
const styles = computed(() => {
  return getCompStyle(item)
})
const useSite = useSiteStore()
const componentMap = useSite.componentMap
const useInteraction = useInteractionStore()
const useControls = useControlsStore()
const isH5Edit = useSite.isH5Edit
let isReplaceByCompId: boolean = false
let isReplaceByStatisticData: boolean = false
let isRefresh: boolean = false
let textValue_ = ref(commonAttr.text)
const textValue = computed({
  get: () => {
    if(isH5Edit) {
      return commonAttr.text
    } else {
      return textValue_.value
    }
  },
  set: (val) => {
    textValue_.value = val
  }
})
let placeholerColor = ''

const isPLabel = computed(() => {
  return commonAttr.isHtml || commonAttr.isVertical || commonAttr.isPLable
})

const initComp = () => {
  if(isH5Edit) {
    EventBus.$on('refreshCommonAttr', onRefreshCommonAttr)
    return
  }
  if(commonAttr.isEdit) {
    useInteraction.updateFormValueMap({ id: item.id, value: commonAttr.text })
  }
  const compIds = commonAttr.text.match(/\$[^\$]+\$/g)
  if(_.isArray(compIds)) {
    for(let i = 0, len = compIds.length; i < len; i++) {
      const compIds_ = compIds[i]
      const compId = getCompIdByParam(compIds_)
      if(compId) {
        if(testGuid(compId)) {
          isReplaceByCompId = true
        } else {
          //活动数据 statisticData 更新数据
          isReplaceByStatisticData = true
        }
        break
      }
    }
  }
  const relateAttrCompId = getCompIdByParam(commonAttr.relateAttrCompId)
  if(isReplaceByCompId) {
    EventBus.$on("refreshBindText", onRefreshBindText)
  } else if(commonAttr.isDynamic || commonAttr.isRandom || commonAttr.dataKey || relateAttrCompId) {
    isRefresh = true
    EventBus.$on("refreshDynamicData", onRefreshText)
  } else if(isReplaceByStatisticData) {
    EventBus.$on("refreshStatisticDataText", onRefreshStatisticDataText)
  }
  onRefreshText()
}
//methods
const onClickText = (e: Event) => {
  if(commonAttr.isEdit) {
    e.stopPropagation()
  }
}
const onRefreshText = () => {
  let txt = commonAttr.text
  if(commonAttr.isHtml) {
    txt = txt.replace(/《/g, "<")
    txt = txt.replace(/》/g, ">")
    textValue_.value = txt
  } 
  if(isH5Edit) {
    return
  }
  //弹层 打组注入类  会改变文本 发事件刷新 这个文本
  if(commonAttr.isRandom) {
    //relateAttrCompId 站点id 655 新年许愿管
    if(txt) {
      const arr = txt.split(",")
      if(arr.length > 1) {
        txt = _.random(arr[0], arr[1])
        textValue_.value = txt
      }
    }
  }
  if(isRefresh) {
    updateTextValue(txt)
  } else {
    if(isReplaceByCompId) {
      txt = replaceStr(useInteraction.formValueMap, txt)
      textValue_.value = txt
      useInteraction.updateFormValueMap({ id: item.id, value: txt })
    }
  }
}
const updateTextValue = (txt: string) => {
  const relateAttrCompId = getCompIdByParam(commonAttr.relateAttrCompId)
  let relateComponentData = componentMap[relateAttrCompId]
  let commonAttrText: string = ''
  let txtDataKey = getCompIdByParam(txt)
  if(commonAttr.dataKey) {
    //有 dataKey且有关联组件id，那么就从对应的关联组件id中获取数据 如果没有关联组件，那么就从全局数据中取数据
    if(relateAttrCompId && relateComponentData) {
      const namePrefix = commonAttr.namePrefix ? commonAttr.namePrefix : ''
      let name: string = namePrefix + getDataKeyValue(relateComponentData, item, txt)
      if(commonAttr.nameNum && name.length > commonAttr.nameNum) {
        name = name.substring(0, commonAttr.nameNum) + '...'
      }
      // 1572 自定义文本 自定义绑定字段为索引+1
      if(txtDataKey == "index") {
        name = (commonAttr.itemIndex + 1).toString()
      }
      commonAttrText = name
    } else if(commonAttr.dataKey == 'custom'){
      commonAttrText = getAttrByCustom(item, item, txt)
    }
  } else if(relateAttrCompId && relateComponentData){
    if(relateComponentData.cid == COMPONENT_TYPES.wb_calendar) {
      // 获取签到日历总数
      let elements = (useControls.controls[relateComponentData.id][CONTROL_TYPES.wb_vote].data as IBaseListControl).elements
      let num = _.filter(elements, (item: ISortItem) => item.num == 1).length
      commonAttrText = txt.replace("$" + txtDataKey + "$", num)
    }
  } else if(commonAttr.isRandom) {
    commonAttrText = txt
  }
  // 动态图片，也可以从图片text中获取键值，或者是默认的shareData中的url
  if(commonAttr.isDynamic && useInteraction.shareData.content && useInteraction.shareData.content.toString().length > 0) {
    if(commonAttr.isHtml) {
      txt = useInteraction.shareData.content
      txt = txt.replace(/《br》/g, "<br\>")
      commonAttrText = txt
    } else {
      commonAttrText = useInteraction.shareData.content
    }
  }
  if(textValue_.value !== commonAttrText) {
    if(commonAttr.divideNumber) {
      let realData: number =  0
      if(commonAttr.divideNumber.indexOf('$') > -1) {
        let selfData = 0
        let key = commonAttr.divideNumber.replace(/\$/g,'')
        let total = useInteraction.bindData[key]
        if(relateComponentData) {
          let itemIndex = relateComponentData.commonAttr.itemIndex
          selfData = Number(relateComponentData.lists[itemIndex][txtDataKey])
        } else {
          selfData = Number(commonAttrText)
        }
        realData =  Math.floor((selfData / total) * 100)
        commonAttrText = txt.replace("$" + txtDataKey + "$", (realData).toString() )
      } else {
        realData = Math.floor(Number(commonAttrText) / commonAttr.divideNumber)
        commonAttrText = txt.replace("$" + txtDataKey + "$", (realData).toString())
      }
      useInteraction.updateFormValueMap({ id: item.id, value: realData })
    } else {
      useInteraction.updateFormValueMap({ id: item.id, value: commonAttrText })
    }
    if(commonAttr.isSeparator) {
      // '10000000000'.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      commonAttrText = commonAttrText.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
    textValue_.value = commonAttrText
  }
}
const onRefreshBindText = () => {
  textValue_.value = replaceStr(useInteraction.formValueMap, commonAttr.text)
}
const onRefreshStatisticDataText = () => {
  textValue_.value = item.commonAttr.text
}
const updateFormValueMap = (text: string) => {
  let value: string = ''
  if(text) {
    value = text
  } else if(textValue_.value && textValue_.value.length > 0) {
    value = textValue_.value
  }
  if(!isH5Edit) {
    useInteraction.updateFormValueMap({ id: item.id, value })
  }
} 
const refreshPlaceholerColor = () => {
  placeholerColor = commonAttr.placeholerColor
  addClass(textareaStyle, placeholerColor)
  addClass(textareaStyle, commonAttr.scrollbarType)
}
const updateScrollY = () => {
  if(textareaStyle) {
    if(commonAttr.isDisplayY) {
      textareaStyle.style['overflow-y'] = 'auto'
      textareaStyle.style['padding-right'] = getPxOVwByValue(8)
    } else {
      textareaStyle.style['overflow-y'] = 'hidden'
    }
  }
}

const onRefreshCommonAttr = (id: string) => { 
  if(item.id != id) {
    return
  }
  if(commonAttr.isDisplayY) {
    updateScrollY()
  }
  if(placeholerColor != commonAttr.placeholerColor && textareaStyle) {
    refreshPlaceholerColor()
  }
}

initComp()

const refDom = ref<any>(null)
let textareaStyle = <any>(null)
onMounted(() => {
  if(refDom.value) {
    if(isPLabel.value) {
      textareaStyle = refDom.value
    } else {
      textareaStyle = refDom.value.$el.getElementsByTagName("textarea")[0]
    }
    refreshPlaceholerColor()
    if(commonAttr.isDisplayY) {
      updateScrollY()
    }
  }
})

onBeforeUnmount(() => {
  if(isH5Edit) {
    EventBus.$off('refreshCommonAttr', onRefreshCommonAttr)
    return
  }
  if(isRefresh) {
    EventBus.$off("refreshDynamicData", onRefreshText)
  }
  if(isReplaceByStatisticData) {
    EventBus.$on("refreshStatisticDataText", onRefreshStatisticDataText)
  }
  isRefresh = false;
  textValue_.value = ''
  if(isReplaceByCompId) {
    EventBus.$off("refreshBindText", onRefreshBindText)
  }
})
</script>

<style lang="scss">
 .wb-text{
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;

  .van-cell{
    width: inherit;
    height: inherit;
  }

  .van-field__body, .van-cell__value--alone, textarea{
    width: inherit;
    height: inherit;
    line-height: inherit;
    color: inherit;
    background-color: inherit;
    text-align: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    font-size: inherit;
    writing-mode: inherit;
  }

  textarea {
    overflow: hidden;
    overflow-scrolling: touch;
      /* ios 自带滚动条不平滑解决方法 */
    tap-highlight-color: rgba(0, 0, 0, 0);
  }
  &.wid-30 ::-webkit-scrollbar {
    width: var(--size-24);
  }
  ::-webkit-scrollbar {
    width: var(--size-8);
  } /* 这是针对缺省样式 (必须的) */
  ::-webkit-scrollbar-track {
    background-color: rgba(42, 12, 12, 0.3);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8);
  } /* 滚动条的滑轨背景颜色 */

  ::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: var(--size-8);
  }
  /* 滑块颜色 */
  .red::-webkit-scrollbar-thumb {
    background: red;
  }
  .orange::-webkit-scrollbar-thumb {
    background: orange;
  }
  .yellow::-webkit-scrollbar-thumb {
    background: yellow;
  }
  .green::-webkit-scrollbar-thumb {
    background: green;
  }
  .aqua::-webkit-scrollbar-thumb {
    background: aqua;
  }
  .blue::-webkit-scrollbar-thumb {
    background: blue;
  }
  .purple::-webkit-scrollbar-thumb {
    background: purple;
  }
  .black::-webkit-scrollbar-thumb {
    background: black;
  }
  .white::-webkit-scrollbar-thumb {
    background: white;
  }
  .lightgrey::-webkit-scrollbar-thumb {
    background: lightgrey;
  }
  .lemon::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: var(--size-8);
    background-image: url();
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
  }
  .hazeblue::-webkit-scrollbar-thumb {
    background: #1d2b51;
  }
  .landscape::-webkit-scrollbar-thumb {
    background: #ababa0;
  }
  .olive::-webkit-scrollbar-thumb {
    background: olive;
  }
  .chocolate::-webkit-scrollbar-thumb {
    background: chocolate;
  }
  .coral::-webkit-scrollbar-thumb {
    background: coral;
  }
  .crimson::-webkit-scrollbar-thumb {
    background: crimson;
  }
  .tomato::-webkit-scrollbar-thumb {
    background: tomato;
  }
  .darkgray::-webkit-input-placeholder {
    color: darkgray;
  }
  .gainsboro::-webkit-input-placeholder {
    color: gainsboro;
  }
  .ghostwhite::-webkit-input-placeholder {
    color: ghostwhite;
  }
  .silver::-webkit-input-placeholder {
    color: silver;
  }
  .whitesmoke::-webkit-input-placeholder {
    color: whitesmoke;
  }
  .aliceblue::-webkit-input-placeholder {
    color: aliceblue;
  }
  .purple::-webkit-input-placeholder{
    color: purple;
  }
}

</style>